<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			background-color: #000
		}
		#Box{
			width: 500px;
			height: 30px;
			margin: 50px auto;
			color: #fff;
			font-size: 36px;
		}
        #Box img{
        	width: 20px;
        }

	</style>
	<script type="text/javascript">
         //数字补0
         function toDou(n){
            if (n<10) {
            	return '0'+n;
            }else{
            	return ''+n;
            }
         } 


        window.onload=function(){
            var oBox=document.getElementById('Box');
            var aImg=document.getElementsByTagName('img');
	        

            function tick(){
	            //创建一个时间对像
				var oDate = new Date();
		        //获取时分秒;  
	            var strDateTime=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
                //charAt 取字符串的其中一位，兼容IE7 	
	            for (var i = 0; i < aImg.length; i++) {
	            	aImg[i].src='images/numbers_005/'+strDateTime.charAt(i)+'_005.png';
	            	//oBox.innerHTML = '<p>'+strDateTime[i]+'</p>';
	            };

            }


            setInterval(tick,1000);
            tick(); // 立即执行，去除默认的000000



        }
	</script>
</head>
<body>
	<div id="Box">
		<img src="images/numbers_005/0_005.png">
		<img src="images/numbers_005/0_005.png">
		:
		<img src="images/numbers_005/0_005.png">
		<img src="images/numbers_005/0_005.png">
		:
		<img src="images/numbers_005/0_005.png">
		<img src="images/numbers_005/0_005.png">
	</div>
</body>
</html>